<template>
	<view class="other_container">
		<view class="card">
			<view class="title">
				<view class="text">手机号登录</view>
			</view>
			<u-gap height="80"></u-gap>
			<view>
				<u--input type="text" placeholder="请输入手机号" v-model="userInfo.phone" prefixIconStyle="font-size:36rpx"
					border="bottom" clearable></u--input>
				<u-gap height="60"></u-gap>
				<u-input v-model="userInfo.code" readonly placeholder="获取验证码后自动回填" type="number" border="bottom"
					clearable input-align="left">
					<template slot="suffix">
						<text class="text" @click="getCode">获取验证码</text>
					</template>
				</u-input>
				<view class="zhuce" @click="goRegistr">还没账号？去注册</view>
			</view>
			<u-gap height="70"></u-gap>
			<view class="action_btns">
				<u-button type="success" @click="loginHandle()" size="large">登录</u-button>
			</view>
		</view>
	</view>
</template>
<script>
import { mapActions } from "vuex";
import { getCode } from '@/api/user'
export default {
	data() {
		return {
			userInfo: {
				phone: "",
				code: "",
			},
			imageBase64: ''
		};
	},
	methods: {
		...mapActions(["login"]),
		// 获取验证码
		getCode() {
			if (!this.userInfo.phone) {
				uni.$u.toast("请先输入手机号！");
				return
			}
			getCode(this.userInfo.phone).then((res) => {
				if (res.code == '200') {
					uni.$u.toast("获取成功！");
					uni.hideLoading();
					this.userInfo.code = res.data
					this.$forceUpdate()
				}
			})
		},
		// 登录
		loginHandle(e) {
			if (!this.userInfo.phone) {
				uni.$u.toast("请先输入手机号！");
				return
			}
			if (!this.userInfo.code) {
				uni.$u.toast("请先设置验证码！");
				return
			}
			this.login(this.userInfo);
		},
		// 去注册
		goRegistr() {
			uni.navigateTo({
				url: `/pages/login/register`
			})
		}
	},
};
</script>

<style scoped lang="scss">
.other_container {
	width: 100vw;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	height: 100vh;
	/deep/.u-button--success {
		background-color: #ffcf60;
	}

	.card {
		margin: 0 auto;
		width: 85%;
		height: 650rpx;
		margin-top: 100rpx;
		background-color: rgba(255,255,255,1);
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 32rpx;
		box-shadow: 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1), 0 8rpx 16rpx -8rpx rgba(0, 0, 0, 0.1);

		.title {
			width: 100%;
			text-align: center;
			.text {
				font-size: 48rpx;
				color: #444;
			}
		}
		.text{
			font-size: 28rpx;
			color: #ffcf60;
		}

		.retrieve_pwd {
			text-align: right;
			font-size: 28rpx;
			color: #ffcf60;
		}

		.zhuce {
			width: 100%;
			box-sizing: border-box;
			margin-top: 20rpx;
			color: #444;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 24rpx;
		}

		.action_btns {
			display: flex;
			flex-direction: column;

			.vx_login {
				text-align: center;
				font-size: 28rpx;
				color: #444;
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}

		}
	}
}
</style>